<template>
  <div class="channelEdit">
    <!-- 我的频道 -->
    <van-cell :border="false">
      <div class="channel-title" slot="title">我的频道</div>
      <van-button
        class="channel-btn"
        type="danger"
        plain
        round
        size="mini"
        @click="isshow = !isshow"
        >{{ isshow ? "完成" : "编辑" }}</van-button
      >
    </van-cell>
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="(value, i) in channelList"
        :key="i"
      >
        <van-icon
          v-show="isshow && !prodelete.includes(value.id)"
          slot="icon"
          name="clear"
        ></van-icon>
        <span
          class="text"
          :class="{ active: i === active }"
          slot="text"
          @click="archie(value, i)"
        >
          {{ value.name }}
        </span>
      </van-grid-item>
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div class="channel-title" slot="title">频道推荐</div>
    </van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item
        class="channel-item"
        icon="plus"
        v-for="value in finalChannel"
        :key="value.id"
        :text="value.name"
        @click="addChannel(value)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllArticle, addArticle, delArticle } from "@/api/allChannels";
import { mapState } from "vuex";
import { cun } from "@/utils/Storage";

export default {
  // 组件名称
  name: "channelEdit",
  // 组件参数 接收来自父组件的数据
  props: {
    channelList: {
      type: Array,
      required: true,
    },
    active: {
      type: Number,
      required: true,
    },
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      allChannlist: [], //频道列表
      isshow: false, //控制叉号图标的显示与隐藏
      prodelete: [0], //存放禁止删除的id
    };
  },
  // 计算属性
  computed: {
    ...mapState(["user"]),
    // 下面方法的简写
    finalChannel() {
      // filter就是返回一个新数组
      // 省去了创建数组和给数组添加数据的步骤
      return this.allChannlist.filter((item) => {
        return !this.channelList.find((myitem) => {
          return item.id == myitem.id;
        });
      });
    },
    // finalChannel() {
    //   const zzchannels = [];

    //   this.allChannlist.forEach((item) => {
    //     const res = this.channelList.find((myitem) => {
    //       return item.id == myitem.id;
    //     });
    //     if (!res) {
    //       zzchannels.push(item);
    //     }
    //   });
    //   return zzchannels;
    // },
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    async allChann() {
      try {
        const { data } = await getAllArticle();
        this.allChannlist = data.data.channels;
      } catch (error) {
        this.$toast("请求频道数据失败，请稍后再试");
      }
    },

    // 点击频道推荐，将其传入我的频道中
    async addChannel(value) {
      this.channelList.push(value);

      if (this.user) {
        // 登录状态下将数据存到线上
        try {
          await addArticle({
            id: value.id,
            seq: this.channelList.length,
          });
        } catch (error) {
          this.$toast("保存失败，请稍后再试");
        }
      } else {
        // 未登录状态下将数据存到线下
        console.log(111);
        cun("toutiao-shuju", this.channelList);
      }
    },

    // 点击切换显示页面
    async archie(item, i) {
      if (this.isshow) {
        // 编辑状态下触发移除当前频道
        // 如果点击的是禁止删除中的数据则直接return出去
        if (this.prodelete.includes(i)) {
          return;
        }
        // 如果点击的索引小于active的值则还显示原来的
        if (i <= this.active) {
          this.$emit("update-active", this.active - 1);
        }

        // 删除当前索引的频道
        this.channelList.splice(i, 1);
        if (this.user) {
          // 登录状态下删除
          try {
            await delArticle(item.id);
          } catch (error) {
            this.$toast("移除失败，请稍后再试");
          }
        } else {
          // 未登录下删除
          cun("toutiao-shuju", this.channelList);
        }
      } else {
        // 非编辑状态下触发更改当前显示频道
        this.$emit("update-active", i, false);
      }
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.allChann();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>

<style scoped lang="less">
.channelEdit {
  padding: 82px 0;

  //   标题样式
  .channel-title {
    font-size: 32px;
    color: #333333;
  }

  //   按钮样式
  .channel-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }

  // 频道单元格样式
  /deep/.channel-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      // 禁止换行
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text,
      .text {
        font-size: 28px;
        color: #222;
        margin-top: 0;
      }
      .active {
        color: red;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }

  // 频道推荐中的图标样式
  /deep/.recommend-grid {
    .channel-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
      }
    }
  }

  //   我的频道中图标样式
  /deep/.my-grid {
    .van-icon-clear {
      position: absolute;
      top: -5px;
      right: -5px;
      font-size: 15px;
      z-index: 2;
      color: #cacaca;
    }
  }
}
</style>
